<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 300px;
				border: 1px solid #666;
				margin: 0 auto;
				text-align: center;
			}
			textarea{
				resize: none;
				width: 100%;
				border: 0;
				outline: 0;
				border-bottom: 1px solid #666;
				height: 100px;
				font-size: 35px;
			}
			button{
				width: 30%;
				height: 50px;
				margin: 2px 0px;
			}
		</style>
	</head>
	<body>
		<div>
			<textarea id="txt" readonly></textarea>
			<button>1</button>
			<button>2</button>
			<button>3</button>
			<button>4</button>
			<button>5</button>
			<button>6</button>
			<button>7</button>
			<button>8</button>
			<button>9</button>
			<button>0</button>
			<button>.</button>
			<button>+</button>
			<button>-</button>
			<button>*</button>
			<button>/</button>
			<button>%</button>
			<button>C</button>
			<button>=</button>
		</div>
		
		<script type="text/javascript">
			var buts=document.getElementsByTagName("button");
			for(i=0;i<buts.length;i++){
				buts[i].onclick=function(){
					if(this.innerHTML=="C"){
						txt.innerHTML="";
					}else if(this.innerHTML=="="){
						txt.innerHTML=eval(txt.innerHTML);
					}else{
						txt.innerHTML+=this.innerHTML;
					}
				}
			}
		</script>
	</body>
</html>
